<template>
    <div class="content">
      <div  style="margin-top: 1rem">
        <div class="form_title">logo上传</div>
        <el-upload
            :multiple="false"
            name="file"
            :drag="true"
            :on-success="logoUpload"
            action="http://www.aner.vip/api/uploadImage">
          <img v-if="logo" :src="logo" class="avatar2">
<!--          action 传到什么位置-->
<!--          multiple 是否多图上传-->
<!--          drag 拖拽进入-->
<!--          on-preview 文件开始上传的钩子-->
<!--          on-success 文件上传成功-->

          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>

      <div class="input">
        <div class="form_title">医疗机构</div>
        <el-input v-model="name" placeholder="请输入机构名称" ></el-input>
      </div>
      <div class="input">
        <div class="form_title">负责人</div>
        <el-input v-model="people" placeholder="请输入负责人名称" ></el-input>
      </div>
      <div class="input">
        <div class="form_title">机构人数</div>
        <el-input v-model="person" placeholder="请输入机构人数" type="number"></el-input>
      </div>
      <div lass="input" style="margin-top: 1rem">
        <div class="form_title">医疗等级</div>
        <el-input v-model="level" placeholder="请输入医疗等级" type="number"></el-input>
      </div>
      <div class="input">
        <div class="form_title">手机号</div>
        <el-input v-model="phone" placeholder="请输入手机号"></el-input>
      </div>
      <div class="input">
        <div class="form_title">
          地址
        </div>
        <el-input v-model="address" placeholder="请输入地址"></el-input>
      </div>



      <div class="input">
        <div class="form_title">机构介绍</div>
        <el-input
          type="textarea"
          :rows="5"
          placeholder="请输入内容"
          v-model="content">
      </el-input>
      </div>
      <div class="input">
        <div class="form_title">机构图片上传</div>
        <el-upload
          action="http://www.aner.vip/api/uploadImage"
          list-type="picture-card"
          :on-success="p1ImageUpload"
          :on-remove="r1ImageRemove">
          <i class="el-icon-plus"></i>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="image" alt="">
      </el-dialog>
      </div>
      <div class="input">
        <div class="form_title">营业执照</div>
        <el-upload
            action="http://www.aner.vip/api/uploadImage"
            list-type="picture-card"
            :on-preview="p2ImageUpload"
            :on-remove="r2ImageRemove">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="image" alt="">
        </el-dialog>
      </div>
      <div class="input">
        <div class="form_title">证书</div>
        <el-upload
            :multiple="false"
            name="file"
            :drag="true"
            :on-success="logoUpload2"
            action="http://www.aner.vip/api/uploadImage">
          <img v-if="qualificationCertificate" :src="qualificationCertificate" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>
      <div class="input">
        <div class="form_title">身份证正面</div>
        <el-upload
            :multiple="false"
            name="file"
            :drag="true"
            :on-success="logoUpload3"
            action="http://www.aner.vip/api/uploadImage">
          <img v-if="frontCard" :src="frontCard" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>
      <div class="input">
        <div class="form_title">身份证反面</div>
        <el-upload
            :multiple="false"
            name="file"
            :drag="true"
            :on-success="logoUpload4"
            action="http://www.aner.vip/api/uploadImage">
          <img v-if="backCard" :src="backCard" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>

      <div class="input">
        <div class="form_title">备注</div>
        <el-input
            type="textarea"
            :rows="5"
            placeholder="请输入备注"
            v-model="remark">
        </el-input>
      </div>
      <div class="rowsc padding">
        <el-button type="primary" @click="submitForm">提交申请</el-button>
      </div>

    </div>
</template>

<script>
export default {
  //医院入驻
  name: "doctor",
  data(){
    return{
      logo:'' ,//logo
      content:'',//介绍
      name:'',//名称
      phone:'',//手机号
      address:'',//地址
      remark:'',//j
      fileList2:[],//机构图片
      people:'',//负责人
      person:1,//人数
      image: [],//机构 图片
      level:'1',//医疗等级
      dialogVisible: false,
      businessLicense:[],//营业执照
      qualificationCertificate:'',//证书
      frontCard:'',//身份证正面
      backCard:'',//身份证反面
    }
  },
  methods:{
    //提交
    submitForm(){
       let data = {
        "name": "机构名称",
          "level": "等级",
          "logo": "logo",
          "image": "机构图片",
          "content": "机构介绍",
          "people": "负责人",
          "phone": "手机号",
          "address": "地址",
          "person": "1",
          "businessLicense": "营业执照",
          "qualificationCertificate": "证书",
          "frontCard": "身份证正面",
          "backCard": "身份证反面",
          "remark": "备注"
      }
      this.$message.success('提交成功，请耐心等待审核')

    },
    //logo
    logoUpload(res) {
      if(res.code == 0){
        console.log('[上传图片]',res.data.path)
        this.logo = res.data.path
      }else{
        this.$message.error('图片上传失败')
      }
    },

    //机构图片上传
    p1ImageUpload(response,file, fileList) {
      console.log('[机构图片]', response,file,fileList);
      let list = []
      if(fileList != undefined){
        fileList.forEach(item=>{
          list.push(item.response.data.path)
        })
        this.image = list
        console.log('[机构图片]',list)
      }
    },
    //机构图片删除
    r1ImageRemove(file,fileList) {
      let list = []
      fileList.forEach(item=>{
        list.push(item.response.data.path)
      })
      this.image = list
      console.log('[机构图片]',list)
    },

    //营业执照上传
    p2ImageUpload(response,file, fileList) {
      console.log('[机构图片]', file,fileList);
      let list = []
      fileList.forEach(item=>{
        list.push(item.response.data.path)
      })
      this.businessLicense = list
      console.log('[机构图片]',list)
    },
    //营业执照图片删除
    r2ImageRemove(file,fileList) {
      let list = []
      fileList.forEach(item=>{
        list.push(item.response.data.path)
      })
      this.businessLicense = list
      console.log('[机构图片]',list)
    },
    //证书上传
    logoUpload2(res) {
      this.qualificationCertificate = res.data.path
    },
    //身份证正面
    logoUpload3(res) {
      this.frontCard = res.data.path
    },
    //身份证反面
    logoUpload4(res) {
      this.backCard = res.data.path
    },

  }
}
</script>

<style scoped>
.content{
  padding-left: 20rem;
  padding-right: 20rem;
}
.input{
 margin-top: 30px;
}
.form_title{
  color: #535865;
  margin-bottom: 0.5rem;
}


.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 378px;
  height: 178px;
  display: block;
}
.avatar2{
  width: 178px;
  height: 178px;
  display: block;
}
</style>